<%--
  Created by IntelliJ IDEA.
  User: Zhou Wenying
  Date: 2023/4/4
  Time: 16:41
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@page isELIgnored="false" %>
<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta http-equiv="Expires" content="0">
    <meta http-equiv="cache-control" content="no-cache">
    <meta http-equiv="pragma" content="no-cache">
    <title>旧书交易平台</title>
    <link rel="stylesheet" href="/static/css/Cart.css">
    <link rel="stylesheet" type="text/css" href="/static/css/zfamazeui.min.css" />
    <link rel="stylesheet" type="text/css" href="/static/css/zfmain.css" />
</head>

<%--style="background-color: aliceblue;"--%>
<body >
<jsp:include page="/page/head2.jsp"></jsp:include>

<div class="pay">
    <!--主内容开始编辑-->
    <div class="tr_recharge">
        <div class="tr_rechtext">
            <p class="te_retit"><img src="/static/image/coin.png" alt="" />充值中心</p>
            <p>1.欢迎进入充值页面！！！</p>
            <p>2.充值金额仅可用于购买书籍，你可以选择支付宝或者是微信的付款方式来进行充值</p>
        </div>
        <form action="" class="am-form" id="doc-vld-msg">
            <div class="tr_rechbox">
                <div class="tr_rechhead">
                    <%--<img src="/static/image/ys_head2.jpg" />--%>
                    <img src="/getImg?img=${user.userImg}">
                    <p>充值帐号：
                        <a>${user.userNickname}</a>
                    </p>
                    <div class="tr_rechheadcion">
                        <img src="/static/image/coin.png" alt="" />
                        <span>当前余额：<span class="myMoney">￥${user.userMoney}</span></span>
                    </div>
                </div>
                <div class="tr_rechli am-form-group">
                    <ul class="ui-choose am-form-group" id="uc_01">
                        <li>
                            <label class="am-radio-inline" >
                                <input type="radio"  value="" name="docVlGender" required data-validation-message="请选择一项充值额度"> 10￥
                            </label>
                        </li>
                        <li>
                            <label class="am-radio-inline">
                                <input type="radio" name="docVlGender" data-validation-message="请选择一项充值额度"> 20￥
                            </label>
                        </li>

                        <li>
                            <label class="am-radio-inline">
                                <input type="radio" name="docVlGender" data-validation-message="请选择一项充值额度">50￥
                            </label>
                        </li>
                        <li>
                            <label class="am-radio-inline">
                                <input type="radio" name="docVlGender" data-validation-message="请选择一项充值额度"> 其他金额
                            </label>
                        </li>
                    </ul>
                    <span>10元起充</span>
                </div>
                <div class="tr_rechoth am-form-group">
                    <span>其他金额：</span>
                    <input type="number" min="10" max="10000" value="10.00元" class="othbox" data-validation-message="充值金额范围：10-10000元" />
                    <%--<p>充值金额范围：10-10000元</p>--%>
                </div>
                <div class="tr_rechcho am-form-group">
                    <span>充值方式：</span>
                    <label class="am-radio">
                        <input type="radio" name="radio1" value="" data-am-ucheck required data-validation-message="请选择一种充值方式"><img src="/static/image/wechatpay.png">
                    </label>
                    <label class="am-radio" style="margin-right:30px;">
                        <input type="radio" name="radio1" value="" data-am-ucheck data-validation-message="请选择一种充值方式"><img src="/static/image/zfbpay.png">
                    </label>
                </div>
                <div class="tr_rechnum">
                    <span>应付金额：</span>
                    <p class="rechnum">0.00元</p>
                </div>
            </div>
            <div class="tr_paybox">
                <input type="submit" value="确认支付" class="tr_pay am-btn" id="am_btn" />
                <span>温馨提示：充值可能会有延时到账的情况，切勿慌张！遇到问题请联系我们。</span>
            </div>
        </form>
    </div>
</div>

</body>

<!-- 底部 -->
<jsp:include page="footer.jsp"></jsp:include>

</html>

<script type="text/javascript" src="/static/js/amazeui.min.js"></script>
<script type="text/javascript" src="/static/js/ui-choose.js"></script>
<script type="text/javascript">
    // 将所有.ui-choose实例化
    $('.ui-choose').ui_choose();
    // uc_01 ul 单选
    var uc_01 = $('#uc_01').data('ui-choose'); // 取回已实例化的对象
    uc_01.click = function(index, item) {
        console.log('click', index, item.text())
    }
    uc_01.change = function(index, item) {
        console.log('change', index, item.text())
    }
    $(function() {
        $('#uc_01 li:eq(3)').click(function() {
            $('.tr_rechoth').show();
            $('.tr_rechoth').find("input").attr('required', 'true')
            $('.rechnum').text('10.00元');
        })
        $('#uc_01 li:eq(0)').click(function() {
            $('.tr_rechoth').hide();
            $('.rechnum').text('10.00元');
            $('.othbox').val('');
        })
        $('#uc_01 li:eq(1)').click(function() {
            $('.tr_rechoth').hide();
            $('.rechnum').text('20.00元');
            $('.othbox').val('');
        })
        $('#uc_01 li:eq(2)').click(function() {
            $('.tr_rechoth').hide();
            $('.rechnum').text('50.00元');
            $('.othbox').val('');
        })
        $(document).ready(function() {
            $('.othbox').on('input propertychange', function() {
                var num = $(this).val();
                $('.rechnum').html(num + ".00元");
            });
        });
    })

    $(function() {
        $('#doc-vld-msg').validator({
            onValid: function(validity) {
                $(validity.field).closest('.am-form-group').find('.am-alert').hide();
            },
            onInValid: function(validity) {
                var $field = $(validity.field);
                var $group = $field.closest('.am-form-group');
                var $alert = $group.find('.am-alert');
                // 使用自定义的提示信息 或 插件内置的提示信息
                var msg = $field.data('validationMessage') || this.getValidationMessage(validity);

                if(!$alert.length) {
                    $alert = $('<div class="am-alert am-alert-danger"></div>').hide().
                    appendTo($group);
                }
                $alert.html(msg).show();
            }
        });
    });

    /*确认充值*/
    $("#am_btn").click(function() {
        // 获取充值信息
        var rechargeAmount = $(".rechnum").html();
        rechargeAmount=rechargeAmount.split("元")[0];
        console.log(rechargeAmount);
        var obj = {};
        obj.amount=rechargeAmount;
        var json = JSON.stringify(obj);
        console.log(json)
        $.ajax({
            url:"/doRecharge",
            type:"post",
            dataType:"json",
            data:json,
            contentType: false,
            success:function (json) {
                console.log(json);
                alert("充值成功！");
            },
            error:function (data) {
                alert("充值失败，请重试！");
            }
        });

        // 发送AJAX请求
        /*$.ajax({
            url: "/doRecharge", // 后端接口地址
            method: "POST", // 请求方法
            data: {
                amount: rechargeAmount,
            },
            success: function(result) {
                // 充值成功，提示用户
                alert("充值成功！");
            },
            error: function() {
                // 充值失败，提示用户
                alert("充值失败，请重试！");
            }
        });*/

    });
</script>


